<template>
  <view class="order-card" @click="orderCardClick" hover-class="order-card--hover">
    <view class="order-card__hd am-flex-rc-between">
      <view class="order-card__number am-text-eill">
        订单号：{{ item.oid }}
        <text style="margin-left: 20rpx; color: #0093ff; font-size: 26rpx" @click.stop="copy(item.oid)">复制</text>
      </view>
      <view class="order-card__status" :class="[orderStatusClass(item.status)]">{{ orderStatusText(item.status) }}
      </view>
    </view>
    <view class="order-card__company am-flex-rc-between">
      <text class="order-card__time">{{
        $timestampToTime(item.createtime)
      }}</text>
      <text class="order-card__err" v-if="isError">异常订单</text>
    </view>
    <view class="order-card__products">
      <view class="order-card__goods" v-for="list in item.orderDetailVOList" :key="list.productVO.id">
        <view class="order-card__goods-cover">
          <image :src="$imageCutting(list.productVO.banner.split(',')[0], 120, 120)" mode="aspectFill"
            class="order-card__goods-img am-block am-wh-100"></image>
        </view>
        <view class="order-card__goods-con">
          <view class="order-card__goods-info">
            <view>
              <view>
                <text class="order-card__goods-name am-line-clamp-two am-text-break">{{ list.productVO.name }}</text>
              </view>
              <view>
                <text class="specStyle">{{ list.productVO.spec }}</text>
              </view>
            </view>
            <view class="order-card__goods-org">
              <view class="order-card__goods-price am-text-eill">{{ list.orderPrice }}元</view>
              <view class="order-card__goods-num">x{{ list.num }}</view>
            </view>
          </view>
          <view>
            <text v-if="item.originalPrice" class="original-price">原价:¥{{ item.originalPrice }}</text>
          </view>
          <view>
            <text class="order-card-status--not-shipped">会员价: ¥{{ item.orderDetailVOList[0].orderPrice }}</text>
          </view>
          <view class="order-card__goods-total">
            <text></text>
            <text class="order-card__total-text">
              共{{ item.orderDetailVOList.length }}件 合计：
              <text class="order-card-status--not-shipped">¥{{ item.price }}</text>
              （含运费:{{ freightShow(item.freight) }}）
            </text>
          </view>
          <view style="margin-top: 24rpx; padding-bottom: 24rpx" class="order-card__goods-total">
            <text></text>
            <text class="order-card__total-text-black pr-20">{{ item.consigneeName }}&nbsp;&nbsp;{{
              item.consigneePhone
            }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="order-card__ft am-flex-rc-between" v-if="allowFtShow">
      <text></text>
      <view class="order-card__btn-wrap">
        <button class="u-reset-button order-card__button order-card__button--success" v-if="item.status === 0"
          @click.stop="applyRefund">
          申请退款
        </button>
        <button class="u-reset-button order-card__button order-card__button--info" v-if="[-1].includes(item.status)"
          @click.stop="cancelOrder" hover-stop-propagation>
          取消订单
        </button>
        <button class="u-reset-button order-card__button order-card__button--info" v-if="[0, -1].includes(item.status)"
          @click.stop="orderEdit" hover-stop-propagation>
          修改地址
        </button>
        <button class="u-reset-button order-card__button order-card__button--info" v-if="item.status === 3"
          @click.stop="cancelRefund" hover-stop-propagation>
          撤销申请
        </button>
        <button class="u-reset-button order-card__button order-card__button--success" v-if="isPay"
          @click.stop="orderPay" hover-stop-propagation>
          付款
        </button>
        <button class="u-reset-button order-card__button order-card__button--success" v-if="item.status === 1"
          @click.stop="orderSign" hover-stop-propagation>
          确认签收
        </button>
        <button class="u-reset-button order-card__button order-card__button--success"
          v-if="item.status === 1 || item.status === 2" @click.stop="lookTransport(item.oid)" hover-stop-propagation>
          查看物流
        </button>
        <button class="u-reset-button order-card__button order-card__button--info" v-if="showAfterBtn"
          @click.stop="orderAfterSales" hover-stop-propagation>
          申请售后
        </button>
      </view>
    </view>
    <ordercancel :showCanle="showCanle" @close="onclose" @submit="submit"></ordercancel>
  </view>
</template>

<script>
import ordercancel from './order-cancel.vue'
// 允许售后的时间; 单位ms
const allCancelTime = 7 * 24 * 60 * 60 * 1000

// 最多允许申请售后的次数
const maxAllowAfterNum = 2
export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      showCanle: false,
      now: Date.now(),
      type: 1
    }
  },
  components: {
    ordercancel
  },
  computed: {
    isError() {
      return this.item.hasPartProductNotDelivery === 1 &&
        (this.item.parseAddressStatus === 1 ||
          this.item.parseAddressStatus === 3)
        ? true
        : false
    },
    isPay() {
      return (
        this.item.status === -1 &&
        this.item.hasPartProductNotDelivery === 0 &&
        (this.item.parseAddressStatus === 0 ||
          this.item.parseAddressStatus === 2)
      )
    },
    allowFtShow() {
      return [0, -1, 1, 3].includes(this.item.status) || this.showAfterBtn
    },
    showAfterBtn() {
      return (
        this.item.status === 2 &&
        this.now < this.item.canApplyTime + allCancelTime &&
        this.item.afterSalesNum < maxAllowAfterNum
      )
    },
    freightShow() {
      return function (v) {
        return '￥' + (v ? v.toFixed(2) : '0.00')
      }
    }
  },
  methods: {
    copy(value) {
      uni.setClipboardData({
        data: value, //要被复制的内容
        success: () => {
          //复制成功的回调函数
          uni.showToast({
            //提示
            title: '复制成功'
          })
        }
      })

      // //提示模板
      // uni.showModal({
      // 	content:value,//模板中提示的内容
      // 	confirmText:"复制内容",
      // 	success:()=>{//点击复制内容的后调函数
      // 	//uni.setClipboardData方法就是讲内容复制到粘贴板

      // 	}
      // });
    },
    onclose() {
      this.showCanle = false
    },
    orderStatusText(type) {
      let obj = {
        '-1': '待支付',
        0: '待接单',
        2: '已完成',
        3: '售后中',
        4: '已退款',
        5: '交易关闭',
        1: '派送中',
        7: '拒绝退款'
      }
      return obj[type] || ''
    },
    orderStatusClass(type) {
      let obj = {
        '-1': 'order-card-status--wait-pay',
        0: 'order-card-status--not-shipped',
        2: 'order-card-status--signed-in',
        3: 'order-card-status--after-sales',
        4: 'order-card-status--refunded',
        5: 'order-card-status--refunded',
        1: 'order-card-status--wait-sign',
        7: 'order-card-status--wait-pay'
      }
      return obj[type] || ''
    },
    orderCardClick() {
      this.$u.route({
        url: '/pages/order/order-details',
        params: {
          id: this.item.id
        }
      })
    },
    orderEdit() {
      this.$u.route('/pages/order/order-edit', { id: this.item.id })
    },
    orderPay() {
      this.$emit('orderPay', this.item)
    },
    cancelOrder() {
      this.type = 1
      this.showCanle = true
    },
    submit(val) {
      this.showCanle = false
      let str = ''
      this.type == 1 ? (str = 'cancelOrder') : (str = 'applyRefund')
      this.$emit(str, { oid: this.item.oid, reason: val })
    },
    // 申请退款
    applyRefund() {
      this.type = 2
      this.showCanle = true
    },
    // 确认收货
    orderSign() {
      this.$emit('orderSign', this.item)
    },
    // 申请售后
    orderAfterSales() {
      console.log(this.item)
      // if(this.item.payType == 'weChat'){
      // 	this.$am_toast.warning('微信支付订单暂不支持申请售后')
      // 	return
      // }else{
      this.$u.route({
        url: '/pages/order-after-sales/order-after-sales',
        params: {
          id: this.item.id
        }
      })
      // }
    },
    // 撤销售后申请
    cancelRefund() {
      this.$emit('cancelRefund', this.item)
    },
    // 查看物流
    lookTransport(id) {
      this.$u.route({
        url: '/pages/order/transport-detail',
        params: {
          id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$section-plr: 16rpx;

.order-card__err {
  color: red;
  font-size: 14px;
}

.order-card {
  padding: 24rpx 32rpx;
  background: #ffffff;
  border-radius: 10rpx;
}

.order-card--hover {
  background-color: rgba(#666, 0.05);
}

.order-card__hd {
  margin-bottom: 10rpx;
}

.order-card__number {
  font-size: 30rpx;
  font-weight: 400;
  color: #000000;
}

.order-card__status {
  font-size: 26rpx;
}

// 未发货
.order-card-status--not-shipped {
  color: #ffa500;
}

// 待收货
.order-card-status--wait-sign {
  color: #0093ff;
}

// 售后中
.order-card-status--after-sales {
  color: #7f41d5;
}

// 已签收
.order-card-status--signed-in {
  color: #86909c;
}

// 待支付
.order-card-status--wait-pay {
  color: #fc843b;
}

// 已退款
.order-card-status--refunded {
  color: #f14141;
}

.order-card__company {
  margin-bottom: 32rpx;
  font-size: 24rpx;
  color: #000;
}

.order-card__company-name {
  width: 420rpx;
}

.order-card__time {
  font-size: 24rpx;
  color: #999;
}

.order-card__products {
  margin-top: 20rpx;
}

.order-card__goods {
  border-top: 1rpx solid #f3f3f3;
  padding-top: 32rpx;
  display: flex;

  &+.order-card__goods {
    margin-top: 30rpx;
  }
}

.order-card__goods-cover {
  overflow: hidden;
  width: 120rpx;
  height: 120rpx;
  flex-shrink: 0;
  border-radius: 8rpx;
}

.order-card__goods-img {}

.order-card__goods-con {
  flex: 1;
  width: 0;
  margin-left: 22rpx;
}

.order-card__goods-info {
  display: flex;
  justify-content: space-between;
}

.order-card__goods-name {
  flex-shrink: 0;
  width: 395rpx;
  font-size: 30rpx;
  line-height: 42rpx;
}

.order-card__goods-org {
  flex: 1;
  width: 0;
  margin-left: 15rpx;
  text-align: right;
}

.order-card__goods-price {
  line-height: 42rpx;
}

.order-card__goods-num {
  margin-top: 18rpx;
  font-size: 24rpx;
  color: #666;
}

.order-card__goods-total {
  font-size: 24rpx;
  color: #ec5d29;
}

.order-card__total-text {
  font-size: 24rpx;
  color: #ec5d29;
  line-height: 34rpx;
}

.order-card__total-text-black {
  font-size: 28rpx;
  color: #1d2129;
  line-height: 40rpx;
}

.order-card__ft {
  border-top: 1rpx solid #f3f3f3;
  padding: 0 $section-plr;
  padding-top: 24rpx;
}

.order-card__btn-wrap {}

.order-card__button {
  display: inline-block;
  height: 54rpx;
  min-width: 120rpx;
  padding: 0 31rpx;
  text-align: center;
  line-height: 50rpx;
  border-radius: 26rpx;
  border-width: 1rpx;
  border-style: solid;
  font-size: 24rpx;

  &+.order-card__button {
    margin-left: 40rpx;
  }
}

.order-card__button--success {
  color: #f14141;
  border-color: #f14141;
}

.order-card__button--info {
  color: #1c1c1e;
  border-color: #dcdee0;
}

.specStyle {
  margin-top: 10rpx;
  padding: 0 8rpx;
  height: 40rpx;
  border-radius: 4rpx;
  border: 1rpx solid #d9d9d9;
  font-size: 22rpx;
}

.pr-20 {
  padding-right: 20rpx;
}
</style>
